<template>
  <div id="body">
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      @click-left="$router.replace('/user')"
    />
    <ul>
      <li class="list-item">
        <van-row @click="isPhone = true">
          <van-col span="20"> 修改手机号 </van-col>
          <van-col>
            <van-icon name="arrow" />
          </van-col>
        </van-row>
      </li>
      <li class="list-item">
        <van-row @click="isPass = true">
          <van-col span="20"> 修改密码 </van-col>
          <van-col>
            <van-icon name="arrow" />
          </van-col>
        </van-row>
      </li>
    </ul>
    <div class="slipt"></div>
    <van-button block size="large" color="#e23e57" @click="logout">
      <span class="btn-text"> 退出登陆 </span>
    </van-button>

    <van-dialog
      v-model="isPhone"
      title="手机号"
      confirm-button-color="#40C0C9"
      :before-close="checkPhone"
      show-cancel-button
    >
      <van-field
        v-model="user.phone"
        placeholder="请输入手机号"
        :formatter="numFormatter"
      />
      <span class="msg">{{ phoneMsg }}</span>
    </van-dialog>

    <van-dialog
      show-cancel-button
      v-model="isPass"
      title="密码"
      confirm-button-color="#40C0C9"
      :before-close="checkPass"
    >
      <van-field
        type="password"
        :formatter="trimFormatter"
        v-model="user.password"
        placeholder="请输入旧密码"
      />
      <van-field
        type="password"
        :formatter="trimFormatter"
        v-model="user.newPassword"
        placeholder="请输入新密码"
      />
      <van-field
        type="password"
        :formatter="trimFormatter"
        v-model="user.confirmPassword"
        placeholder="请确定密码"
      />
      <span class="msg">{{ passMsg }}</span>
    </van-dialog>
  </div>
</template>
<script>
import { Dialog, Notify } from "vant";
export default {
  name: "settingPage",
  data() {
    return {
      user: {
        password: "",
        newPassword: "",
        confirmPassword: "",
      },
      isPhone: false,
      isPass: false,
      phoneMsg: "",
      passMsg: "",
      loginUser: {},
    };
  },
  methods: {
    numFormatter(value) {
      // 过滤输入的数字
      return value.replace(/[^\d]/g, "");
    },
    trimFormatter(value) {
      return value.replace(" ", "");
    },
    logout() {
      Dialog.confirm({
        message: "是否退出",
      }).then(() => {
        this.getRequest("/user/logout");
        Notify({ type: "success", message: "退出成功" });
        localStorage.removeItem("loginUser");
        this.$router.replace("/");
      });
    },
    checkPhone(actions, done) {
      if (actions == "cancel") {
        done();
        return;
      }
      if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.user.phone)) {
        this.phoneMsg = "请输入正确的手机号";
        done(false);
        return;
      }
      this.getRequest("/user/verifyPhone", {
        phone: this.user.phone,
      }).then((result) => {
        if (result.data.data) {
          this.phoneMsg = "";
          done();
          return;
        } else {
          this.phoneMsg = "手机号已存在";
          done(false);
        }
      });
      this.postRequest("/user/update", {
        phone: this.user.phone,
      }).then(() => {
        this.phoneMsg = "";
        Notify({ type: "success", message: "修改成功" });
        done();
        this.loginUser.phone = this.user.phone;
        this.updateLoginUser();
      });
    },
    updateLoginUser() {
      localStorage.setItem("loginUser", JSON.stringify(this.loginUser));
    },
    checkPass(actions, done) {
      if (actions == "cancel") {
        done();
        return;
      }
      this.user.password = this.user.password.trim();
      this.user.newPassword = this.user.newPassword.trim();
      this.user.confirmPassword = this.user.confirmPassword.trim();
      if (
        this.user.password.length == 0 ||
        this.user.newPassword.length == 0 ||
        this.user.confirmPassword.length == 0
      ) {
        this.passMsg = "请输入全部密码";
        done(false);
        return;
      }
      if (this.user.newPassword != this.user.confirmPassword) {
        this.passMsg = "两次密码不一样";
        done(false);
        return;
      }
      this.postRequest("/user/update", {
        password: this.user.newPassword,
        oldPassword: this.user.password,
      }).then((res) => {
        if (res.data.status == 200) {
          this.passMsg = "";
          Notify({ type: "success", message: "修改成功" });
          done();
        } else {
          this.passMsg = res.data.msg;
          done(false);
        }
      });
    },
  },
  created() {
    let loginUser = JSON.parse(localStorage.getItem("loginUser"));
    this.loginUser = loginUser;
    this.user.phone = loginUser.phone;
  },
};
</script>
<style scoped>
.list-item {
  text-indent: 1em;
  display: block;
  height: 3em;
  line-height: 3em;
  border-top: 1px solid #ebedf0;
}
.slipt {
  width: 100%;
  height: 1em;
  background-color: #eaeaea;
}
.btn-text {
  font-size: 1.2em;
  font-weight: 500;
}
</style>
